@include b('emoji-input-search') {
  display: block;
  width: 100%;
  max-width: 100%;

  @include e('container') {
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 getCssVar('spacing', 'base-loose');
    margin: getCssVar('spacing', 'base') 0 getCssVar('spacing', 'tight') 0;

    @include m('input') {
      box-sizing: border-box;
      width: 100%;
      height: getCssVar('height-control', 'default');
      padding: 0 getCssVar('spacing', 'tight');
      padding-right: calc(var(--ibiz-spacing-tight) * 2 + var(--ibiz-font-size-regular));
      border: none;
      border-radius: getCssVar('border-radius', 'small');
      box-shadow: 0 0 0 1px getCssVar('color', 'border') inset;

      &:focus {
        outline: none;
        box-shadow: 0 0 0 1px getCssVar('color', 'primary') inset;
      }
    }

    @include m('search') {
      position: absolute;
      top: 50%;
      right: getCssVar('spacing', 'base-loose');
      padding: 0 getCssVar('spacing', 'tight');
      cursor: pointer;
      transform: translate(0, -50%);

      &::after {
        position: absolute;
        top: 50%;
        right: calc(var(--ibiz-spacing-tight) * 2 + var(--ibiz-font-size-regular));
        display: block;
        width: 1px;
        height: getCssVar('font-size', 'regular');
        content: '';
        border-left: 1px solid getCssVar('color', 'border');
        transform: translate(0, -50%);
      }

      svg {
        fill: getCssVar('color', 'text', 3);
      }
    }

    &:hover {
      input {
        box-shadow: 0 0 0 1px getCssVar('color', 'primary') inset;
      }
    }
  }
}
